<template>
    <div class="login-page">
        <div id="particles">
            <div class="slogan1">EARLY SCREENING AND EARLY TREATMENT</div>
            <div class="slogan2">“几代人、择一事、终一生，为使命、诺初心、兴华夏”</div>
        </div>
        <div class="login-form">
            <div class="login-img">
                <img src="../assets/img/logo1.png"/>
            </div>


            <el-form :model="loginForm" class="login-elform" ref="loginForm" label-position="left"
                     label-width="0px">
                <div class="login-text">
                    肺癌人群筛查信息管理系统
                </div>
                <div class="login-text1">
                    <div class="line-left"></div>
                    信息管理系统
                    <div class="line-right"></div>
                </div>
                <el-form-item prop="user_name">
                    <el-input v-model="loginForm.user_name" prefix-icon="el-icon-user-solid"
                              placeholder="登录账号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" type="password" prefix-icon="fa fa-lock"
                              placeholder="登录密码"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-row>
                        <el-col :span="14">
                            <el-input v-model="loginForm.code" prefix-icon="fa fa-lock"
                                      placeholder="验证码"></el-input>
                        </el-col>
                        <el-col :span="9" style="float: right;line-height: 0;">
                            <img style="width: 100%; height: 40px;border-radius: 5px;" class="pointer"
                                 :src="loginForm.src"
                                 @click="refreshCaptcha()"/>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item prop="password">
                    <el-checkbox v-model="checked" class="autologin">自动登录</el-checkbox>
                    <span class="pwd">忘记密码？</span>
                </el-form-item>
                <el-form-item>
                    <el-button type="button" style="width:100%;" @click.native.prevent="login('loginForm')"
                               :loading="loading">登 录
                    </el-button>
                </el-form-item>
            </el-form>
            <div class="footer">
                <div class="copyright">Copyright 2021-2022 All Rights Reserved. 版权所有: 癌症早诊早治项目（农村）专家委员会</div>
                <div class="beian">京卫网审？ | 京ICP备13000001号 | 京B2-20200001 | 京公网安备 32011400000001号 | 测试版</div>
            </div>
        </div>
    </div>
</template>

<script>

    var _self;
    const baseUrl = process.env.VUE_APP_API;
    import particles from 'particles.js'
    import particlesJson from '@/assets/particles/particles.json'
    import md5 from 'js-md5';

    export default {
        data() {
            return {
                checked: false,
                loginForm: {
                    user_name: "",
                    src: '',
                    password: "",
                    code: "",

                },
                redirect: undefined,
                loading: false,
            }
        },
        mounted: function () {
            particlesJS('particles', particlesJson);
        },
        created() {
            _self = this;
            _self.refreshCaptcha()
        },
        methods: {
            refreshCaptcha: function () {
                _self.loginForm.src = baseUrl + "/apiadmin/captcha?t=" + new Date().getTime();
            },
            login: function () {
                _self.loading = true;
                _self.loginForm.password = md5(_self.loginForm.password);

                _self.$store.dispatch("Login", _self.loginForm).then(() => {
                    _self.$router.push({
                        path: _self.redirect || "/"
                    })
                }).catch(() => {
                    _self.loginForm = {
                        user_name: "",
                        password: "",
                    };
                    _self.refreshCaptcha();
                    _self.loading = false;
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .login-page {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: url(../assets/img/bj.png);
        background-size: 100% 100%;

        #particles {
            width: 50vw;
            height: 100vh;

            .slogan1 {
                font-family: MFTheGoldenEra_Noncommercial-Bold;
                font-size: 1.86rem;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #979797;
                opacity: 0.7;
                position: absolute;
                left: 11rem;
                top: 28rem;
            }

            .slogan2 {
                height: 2rem;
                font-family: FZLANTY_ZHONGJW--GB1-0;
                font-size: 2rem;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #979797;
                position: absolute;
                left: 7rem;
                top: 31rem;
            }
        }

        .login-form {
            position: absolute;
            width: 48rem;
            height: 62rem;
            z-index: 3;
            right: 6rem;
            top: 3rem;

            .login-img {
                margin-left: 3rem;
                margin-top: 10rem;
                width: 43rem;
                height: 5rem;

                img {
                    width: 43rem;
                    height: 5rem;
                }
            }

            .login-elform {
                width: 24rem;
                margin-left: 13rem;

                .login-text {
                    margin-top: 8rem;
                    font-family: AdobeHeitiStd-Regular;
                    font-size: 1.5rem;
                    font-weight: bold;
                    font-stretch: normal;
                    line-height: 3rem;
                    color: #f70000;
                    text-align: center;
                }

                .login-text1 {
                    margin-bottom: 2rem;
                    font-family: AdobeHeitiStd-Regular;
                    font-size: 1.5rem;
                    font-weight: bold;
                    font-stretch: normal;
                    line-height: 3rem;
                    color: #f70000;
                    text-align: center;
                    position: relative;

                    .line-left {
                        position: absolute;
                        width: 4rem;
                        border: 1px solid red;
                        left: 25px;
                        top: 22px;
                    }

                    .line-right {
                        position: absolute;
                        width: 4rem;
                        border: 1px solid red;
                        right: 25px;
                        top: 22px;
                    }
                }

                .autologin {
                    font-family: SimSun;
                    font-size: 1rem;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #bfbfbf;
                }

                .el-checkbox__label {
                    font-size: 1rem;
                }

                .pwd {
                    position: absolute;
                    right: 0;
                    font-family: SimSun;
                    font-size: 1rem;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #bfbfbf;
                }

                .el-button {
                    background-image: linear-gradient(0deg, #000000 0%, #0f599c 100%);
                    border: 0;
                    border-radius: 0;
                    color: #ffffff;
                }
            }

            .footer {
                position: absolute;
                left: 9rem;
                bottom: 2rem;
                height: 2rem;
                text-align: center;
                font-family: SimSun;
                font-size: 0.7rem;
                font-weight: normal;
                font-stretch: normal;
                line-height: 2rem;
                letter-spacing: 0px;
                color: #000000;
            }
        }
    }
</style>
